<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="css/materialize.min.css">

    

    <title>H5 网页示例</title>

    <style>
        #title{
            color: #fb8c00;
        }

    </style>
</head>
<body style="margin-left: 10px;margin-right: 10px">


<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="css/materialize.min.css">

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <title>H5 网页示例</title>

    <style>
        #title{
            color: #fb8c00;
        }

    </style>
</head>
<body style="margin-left: 10px;margin-right: 10px">

<div>1. この店は、今月に入って、客数が極端に減ったらしい。</div>
<p>
    <label>
        <input type="checkbox" name="aihao" id="a" class="filled-in"/>
        <span>A: きょたん</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="b" class="filled-in"/>
        <span>B: きょてん</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="c" class="filled-in"/>
        <span>C: きょくたん</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="d" class="filled-in"/>
        <span>D: きょくてん</span>
    </label>
</p >











<div>2. 食事が済んだら、食器はここに戻してください。</div>
<p>
    <label>
        <input type="checkbox" name="aihao" id="a1" class="filled-in"/>
        <span>A: かえして</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="b1" class="filled-in"/>
        <span>B: のこして</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="c1" class="filled-in"/>
        <span>C: わたして</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="d1" class="filled-in"/>
        <span>D: もどして</span>
    </label>
</p >


<div>3. この効果はどのくらい継続するのだろう。</div>
<p>
    <label>
        <input type="checkbox" name="aihao" id="a" class="filled-in"/>
        <span>A: じぞく</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="b" class="filled-in"/>
        <span>B: けいぞく</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="c" class="filled-in"/>
        <span>C: じそく</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="d" class="filled-in"/>
        <span>D: けいそく</span>
    </label>
</p >


<div>4. これらの経費は除いて計算してください。</div>
<p>
    <label>
        <input type="checkbox" name="aihao" id="a" class="filled-in"/>
        <span>A: のぞいて</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="b" class="filled-in"/>
        <span>B: はぶいて</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="c" class="filled-in"/>
        <span>C: ぬいて</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="d" class="filled-in"/>
        <span>D: ひいて</span>
    </label>
</p >


<div>5. A国とB国の間で盛んに貿易が行われている。</div>
<p>
    <label>
        <input type="checkbox" name="aihao" id="a" class="filled-in"/>
        <span>A: もうえき</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="b" class="filled-in"/>
        <span>B: ぼうえき</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="c" class="filled-in"/>
        <span>C: もうい</span>
    </label>
</p >
<p>
    <label>
        <input type="checkbox" name="aihao" id="d" class="filled-in"/>
        <span>D: ぼうい</span>
    </label>
</p >









<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日语专业四级真题</title>
    <style>

        .quiz-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .question-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 2px solid black;
            max-width: 600px;
            margin-bottom: 30px;
        }

        .header {
            margin-bottom: 20px;
        }

        h1 {
            font-size: 36px;
            text-align: center;
        }

        p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .answer-options {
            display: flex;
            flex-direction: column;
        }

        .answer-options input[type=radio] {
            margin-right: 10px;
        }

        .submit-button-container {
            margin-top: 50px;
        }

        #submit-button {
            font-size: 20px;
            padding: 10px 20px;
            border: none;
            background-color: black;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #submit-button:hover {
            background-color: white;
            color: black;
        }

        .result-container {
            margin-top: 50px;
            text-align: center;
        }

        span#result {
            font-weight: bold;
            font-size: 24px;
            padding: 0 10px;
        }



    </style>
</head>
<body>

<div class="quiz-container">
    <div class="question-container">
        <div class="header">
            <h1>问题一</h1>
        </div>
        <p>そまつな毎日の食事に飽きた。</p>

        <div class="answer-options">
            <input type="radio" id="a" name="answer1" value="a">
            <label for="a">A.粗末</label><br>
            <input type="radio" id="b" name="answer1" value="b">
            <label for="b">B.粗燥</label><br>
            <input type="radio" id="c" name="answer1" value="c">
            <label for="c">C.粗雑</label><br>
            <input type="radio" id="d" name="answer1" value="d">
            <label for="d">D.粗大</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二</h1>
        </div>
        <p>病後のけいかは、良好である。</p>

        <div class="answer-options">
            <input type="radio" id="e" name="answer2" value="e">
            <label for="e">A.結果</label><br>
            <input type="radio" id="f" name="answer2" value="f">
            <label for="f">B.恵果</label><br>
            <input type="radio" id="g" name="answer2" value="g">
            <label for="g">C.経過</label><br>
            <input type="radio" id="h" name="answer2" value="h">
            <label for="h">D.慶賀</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题三</h1>
        </div>
        <p>父の店が大変はんじょうしている。</p>

        <div class="answer-options">
            <input type="radio" id="i" name="answer3" value="i">
            <label for="i">A.繁状</label><br>
            <input type="radio" id="j" name="answer3" value="j">
            <label for="j">B.繁盛</label><br>
            <input type="radio" id="k" name="answer3" value="k">
            <label for="k">C.斑状</label><br>
            <input type="radio" id="l" name="answer3" value="l">
            <label for="l">D.繁奨</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题四</h1>
        </div>
        <p>自分へのごほうびに海外旅行にいった。</p>

        <div class="answer-options">
            <input type="radio" id="m" name="answer4" value="m">
            <label for="m">A.奨美</label><br>
            <input type="radio" id="n" name="answer4" value="n">
            <label for="n">B.褒美</label><br>
            <input type="radio" id="o" name="answer4" value="o">
            <label for="o">C.報美</label><br>
            <input type="radio" id="p" name="answer4" value="p">
            <label for="p">D.褒奨</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题五</h1>
        </div>
        <p>心地よい音楽を聴きながら、食事をする。</p>

        <div class="answer-options">
            <input type="radio" id="q" name="answer5" value="q">
            <label for="q">A.ここち</label><br>
            <input type="radio" id="r" name="answer5" value="r">
            <label for="r">B.こころち</label><br>
            <input type="radio" id="s" name="answer5" value="s">
            <label for="s">C.ここじ</label><br>
            <input type="radio" id="t" name="answer5" value="t">
            <label for="t">D.こころじ</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题六</h1>
        </div>
        <p>登山に必要なものを集めてもらいます。</p>

        <div class="answer-options">
            <input type="radio" id="u" name="answer6" value="u">
            <label for="u">A.とうざん</label><br>
            <input type="radio" id="v" name="answer6" value="v">
            <label for="v">B.とうさん</label><br>
            <input type="radio" id="w" name="answer6" value="w">
            <label for="w">C.とさん</label><br>
            <input type="radio" id="x" name="answer6" value="x">
            <label for="x">D.とざん</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题七</h1>
        </div>
        <p>梅雨があけて夏がやってきた。</p>

        <div class="answer-options">
            <input type="radio" id="y" name="answer7" value="y">
            <label for="y">A.うめあめ</label><br>
            <input type="radio" id="z" name="answer7" value="z">
            <label for="z">B.ばいあめ</label><br>
            <input type="radio" id="aa" name="answer7" value="aa">
            <label for="aa">C.つゆ</label><br>
            <input type="radio" id="ab" name="answer7" value="ab">
            <label for="ab">D.つうゆう</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题八</h1>
        </div>
        <p>事故の原因は目下調査中です。</p>

        <div class="answer-options">
            <input type="radio" id="ac" name="answer8" value="ac">
            <label for="ac">A.めした</label><br>
            <input type="radio" id="ad" name="answer8" value="ad">
            <label for="ad">B.めか</label><br>
            <input type="radio" id="ae" name="answer8" value="ae">
            <label for="ae">C.もっか</label><br>
            <input type="radio" id="af" name="answer8" value="af">
            <label for="af">D.もくげ</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题九</h1>
        </div>
        <p>彼の指図に従った人間は、一人もいなかったようです。</p>

        <div class="answer-options">
            <input type="radio" id="ag" name="answer9" value="ag">
            <label for="ag">A.しず</label><br>
            <input type="radio" id="ah" name="answer9" value="ah">
            <label for="ah">B.ゆびず</label><br>
            <input type="radio" id="ai" name="answer9" value="ai">
            <label for="ai">C.さしと</label><br>
            <input type="radio" id="aj" name="answer9" value="aj">
            <label for="aj">D.さしず</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十</h1>
        </div>
        <p>乗り換えの時間を車掌に聞いた。</p>

        <div class="answer-options">
            <input type="radio" id="ak" name="answer10" value="ak">
            <label for="ak">A.しゃちょう </label><br>
            <input type="radio" id="al" name="answer10" value="al">
            <label for="al">B.しゃしょう</label><br>
            <input type="radio" id="am" name="answer10" value="am">
            <label for="am">C.しゃちゅう </label><br>
            <input type="radio" id="an" name="answer10" value="an">
            <label for="an">D.しゃじょう</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十一</h1>
        </div>
        <p>＿＿＿＿そんなことはありえないだろう。</p>

        <div class="answer-options">
            <input type="radio" id="ao" name="answer11" value="ao">
            <label for="ao">A.なにか</label><br>
            <input type="radio" id="ap" name="answer11" value="ap">
            <label for="ap">B.まさか</label><br>
            <input type="radio" id="aq" name="answer11" value="aq">
            <label for="aq">C.さすが</label><br>
            <input type="radio" id="ar" name="answer11" value="ar">
            <label for="ar">D.おろか</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十二</h1>
        </div>
        <p>＿＿＿＿学生たちの前で講義することになった。</p>

        <div class="answer-options">
            <input type="radio" id="as" name="answer12" value="as">
            <label for="as">A.なぜ</label><br>
            <input type="radio" id="at" name="answer12" value="at">
            <label for="at">B.なに</label><br>
            <input type="radio" id="av" name="answer12" value="av">
            <label for="av">C.なんと</label><br>
            <input type="radio" id="aw" name="answer12" value="aw">
            <label for="aw">D.なにも</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十三</h1>
        </div>
        <p>父親に、看病する能力を_______期待していないようだ。</p>

        <div class="answer-options">
            <input type="radio" id="ax" name="answer13" value="ax">
            <label for="ax">A.あたり</label><br>
            <input type="radio" id="ay" name="answer13" value="ay">
            <label for="ay">B.あかり</label><br>
            <input type="radio" id="az" name="answer13" value="az">
            <label for="az">C.あさり</label><br>
            <input type="radio" id="ba" name="answer13" value="ba">
            <label for="ba">D.あまり</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十四</h1>
        </div>
        <p>一般の家の中では神棚と仏壇が同じ家の中に＿＿＿＿ている。</p>

        <div class="answer-options">
            <input type="radio" id="bb" name="answer14" value="bb">
            <label for="bb">A.かわされ</label><br>
            <input type="radio" id="bc" name="answer14" value="bc">
            <label for="bc">B.かまわれ</label><br>
            <input type="radio" id="bd" name="answer14" value="bd">
            <label for="bd">C.かなわれ</label><br>
            <input type="radio" id="be" name="answer14" value="be">
            <label for="be">D.まつられ</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十五</h1>
        </div>
        <p>自分のことばかり考えているあいつは本当に虫の＿＿＿＿やつだ。</p>

        <div class="answer-options">
            <input type="radio" id="bf" name="answer15" value="bf">
            <label for="bf">A.いい</label><br>
            <input type="radio" id="bg" name="answer15" value="bg">
            <label for="bg">B.よくない</label><br>
            <input type="radio" id="bh" name="answer15" value="bh">
            <label for="bh">C.悪い</label><br>
            <input type="radio" id="bi" name="answer15" value="bi">
            <label for="bi">D.悪くない</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十六</h1>
        </div>
        <p>あの外人さんはまるで日本人のように＿＿＿＿日本語をしゃべって
            いる。</p>

        <div class="answer-options">
            <input type="radio" id="bj" name="answer16" value="bj">
            <label for="bj">A.のどかな</label><br>
            <input type="radio" id="bh" name="answer16" value="bh">
            <label for="bh">B.しずかな</label><br>
            <input type="radio" id="bi" name="answer16" value="bi">
            <label for="bi">C.なめらかな</label><br>
            <input type="radio" id="bj" name="answer16" value="bj">
            <label for="bj">D.ほがらかな</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十七</h1>
        </div>
        <p>自分の将来をちっとも心配しない彼は本当に＿＿＿＿人だ。</p>

        <div class="answer-options">
            <input type="radio" id="bk" name="answer17" value="bk">
            <label for="bk">A.元気な</label><br>
            <input type="radio" id="bl" name="answer17" value="bl">
            <label for="bl">B.呑気な</label><br>
            <input type="radio" id="bm" name="answer17" value="bm">
            <label for="bm">C.平気な</label><br>
            <input type="radio" id="bn" name="answer17" value="bn">
            <label for="bn">D.根気な</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十八</h1>
        </div>
        <p>ここに＿＿＿＿してください。</p>

        <div class="answer-options">
            <input type="radio" id="bo" name="answer18" value="bo">
            <label for="bo">A.サイン</label><br>
            <input type="radio" id="bp" name="answer18" value="bp">
            <label for="bp">B.サービス</label><br>
            <input type="radio" id="bq" name="answer18" value="bq">
            <label for="bq">C.サークル</label><br>
            <input type="radio" id="br" name="answer18" value="br">
            <label for="br">D.サラリーマン</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题十九</h1>
        </div>
        <p>政治家になる夢はもう＿＿＿＿て、故郷に帰ろうと思います。</p>

        <div class="answer-options">
            <input type="radio" id="bs" name="answer19" value="bs">
            <label for="bs">A.あこがれ</label><br>
            <input type="radio" id="bt" name="answer19" value="bt">
            <label for="bt">B.あてられ</label><br>
            <input type="radio" id="bu" name="answer19" value="bu">
            <label for="bu">C.あきらめ</label><br>
            <input type="radio" id="bv" name="answer19" value="bv">
            <label for="bv">D.あらわれ</label><br>
        </div>
    </div>

    <div class="question-container">
        <div class="header">
            <h1>问题二十</h1>
        </div>
        <p>間が＿＿＿＿返事を寄こされ、本当に困っている。</p>

        <div class="answer-options">
            <input type="radio" id="bw" name="answer20" value="bw">
            <label for="bw">A.抜けた</label><br>
            <input type="radio" id="bx" name="answer20" value="bx">
            <label for="bx">B.掛けた</label><br>
            <input type="radio" id="by" name="answer20" value="by">
            <label for="by">C.避けた</label><br>
            <input type="radio" id="bz" name="answer20" value="bz">
            <label for="bz">D.空けた</label><br>
        </div>
    </div>

    <div class="submit-button-container">
        <button id="submit-button">提交</button>
    </div>

    <div class="result-container">
        <p>你做对了<span id="result">0</span>道题！</p>
    </div>
</div>

<script>
    // 获取页面元素
    const submitButton = document.getElementById("submit-button");
    const answerOptions1 = document.getElementsByName("answer1");
    const answerOptions2 = document.getElementsByName("answer2");
    const answerOptions3 = document.getElementsByName("answer3");
    const answerOptions4 = document.getElementsByName("answer4");
    const answerOptions5 = document.getElementsByName("answer5");
    const answerOptions6 = document.getElementsByName("answer6");
    const answerOptions7 = document.getElementsByName("answer7");
    const answerOptions8 = document.getElementsByName("answer8");
    const answerOptions9 = document.getElementsByName("answer9");
    const answerOptions10 = document.getElementsByName("answer10");
    const answerOptions11 = document.getElementsByName("answer11");
    const answerOptions12 = document.getElementsByName("answer12");
    const answerOptions13 = document.getElementsByName("answer13");
    const answerOptions14 = document.getElementsByName("answer14");
    const answerOptions15 = document.getElementsByName("answer15");
    const answerOptions16 = document.getElementsByName("answer16");
    const answerOptions17 = document.getElementsByName("answer17");
    const answerOptions18 = document.getElementsByName("answer18");
    const answerOptions19 = document.getElementsByName("answer19");
    const answerOptions20 = document.getElementsByName("answer20");
    let correctAnswers = 0; // 初始化做对题数为0

    // 点击提交按钮后的操作
    submitButton.addEventListener("click", () => {
        // 判断第一题的答案是否正确
        let answer1 = "";
        for (let i = 0; i < answerOptions1.length; i++) {
            if (answerOptions1[i].checked) {
                Answer1 = answerOptions1[i].value;
                break;
            }
        }
        if (answer1 === "a") {
            correctAnswers++;
        }

        // 判断第二题的答案是否正确
        let answer2 = "";
        for (let i = 0; i < answerOptions2.length; i++) {
            if (answerOptions2[i].checked) {
                Answer2 = answerOptions2[i].value;
                break;
            }
        }
        if (answer2 === "g") {
            correctAnswers++;
        }

        // 判断第三题的答案是否正确
        let answer3 = "";
        for (let i = 0; i < answerOptions3.length; i++) {
            if (answerOptions3[i].checked) {
                Answer3 = answerOptions3[i].value;
                break;
            }
        }
        if (answer3 === "j") {
            correctAnswers++;
        }

        // 判断第四题的答案是否正确
        let answer4 = "";
        for (let i = 0; i < answerOptions4.length; i++) {
            if (answerOptions4[i].checked) {
                Answer4 = answerOptions4[i].value;
                break;
            }
        }
        if (answer4=== "n") {
            correctAnswers++;
        }

        // 判断第五题的答案是否正确
        let answer5 = "";
        for (let i = 0; i < answerOptions5.length; i++) {
            if (answerOptions5[i].checked) {
                Answer5 = answerOptions5[i].value;
                break;
            }
        }
        if (answer5 === "q") {
            correctAnswers++;
        }


        // 判断第六题的答案是否正确
        let answer6 = "";
        for (let i = 0; i < answerOptions6.length; i++) {
            if (answerOptions6[i].checked) {
                answer6 = answerOptions6[i].value;
                break;
            }
        }
        if (answer6 === "x") {
            correctAnswers++;
        }

        // 判断第七题的答案是否正确
        let answer7 = "";
        for (let i = 0; i < answerOptions7.length; i++) {
            if (answerOptions7[i].checked) {
                answer7 = answerOptions7[i].value;
                break;
            }
        }
        if (answer7 === "aa") {
            correctAnswers++;
        }

        // 判断第八题的答案是否正确
        let answer8 = "";
        for (let i = 0; i < answerOptions8.length; i++) {
            if (answerOptions8[i].checked) {
                answer8 = answerOptions8[i].value;
                break;
            }
        }
        if (answer8 === "ae") {
            correctAnswers++;
        }

        // 判断第九题的答案是否正确
        let answer9 = "";
        for (let i = 0; i < answerOptions9.length; i++) {
            if (answerOptions9[i].checked) {
                answer9 = answerOptions9[i].value;
                break;
            }
        }
        if (answer9 === "aj") {
            correctAnswers++;
        }

        // 判断第十题的答案是否正确
        let answer10 = "";
        for (let i = 0; i < answerOptions10.length; i++) {
            if (answerOptions10[i].checked) {
                answer10 = answerOptions10[i].value;
                break;
            }
        }
        if (answer10 === "ac") {
            correctAnswers++;
        }

        // 判断第十一题的答案是否正确
        let answer11 = "";
        for (let i = 0; i < answerOptions11.length; i++) {
            if (answerOptions11[i].checked) {
                answer11 = answerOptions11[i].value;
                break;
            }
        }
        if (answer11 === "ap") {
            correctAnswers++;
        }

        // 判断第十二题的答案是否正确
        let answer12 = "";
        for (let i = 0; i < answerOptions12.length; i++) {
            if (answerOptions12[i].checked) {
                answer12 = answerOptions12[i].value;
                break;
            }
        }
        if (answer12 === "av") {
            correctAnswers++;
        }

        // 判断第十三题的答案是否正确
        let answer13 = "";
        for (let i = 0; i < answerOptions13.length; i++) {
            if (answerOptions13[i].checked) {
                answer13 = answerOptions13[i].value;
                break;
            }
        }
        if (answer13 === "ba") {
            correctAnswers++;
        }

        // 判断第十四题的答案是否正确
        let answer14 = "";
        for (let i = 0; i < answerOptions14.length; i++) {
            if (answerOptions14[i].checked) {
                answer14 = answerOptions14[i].value;
                break;
            }
        }
        if (answer14 === "be") {
            correctAnswers++;
        }

        // 判断第十五题的答案是否正确
        let answer15 = "";
        for (let i = 0; i < answerOptions15.length; i++) {
            if (answerOptions15[i].checked) {
                answer15 = answerOptions15[i].value;
                break;
            }
        }
        if (answer15 === "bf") {
            correctAnswers++;
        }

        // 判断第十六题的答案是否正确
        let answer16 = "";
        for (let i = 0; i < answerOptions16.length; i++) {
            if (answerOptions16[i].checked) {
                answer16 = answerOptions16[i].value;
                break;
            }
        }
        if (answer16 === "bi") {
            correctAnswers++;
        }

        // 判断第十七题的答案是否正确
        let answer17 = "";
        for (let i = 0; i < answerOptions17.length; i++) {
            if (answerOptions17[i].checked) {
                answer17 = answerOptions17[i].value;
                break;
            }
        }
        if (answer17 === "bl") {
            correctAnswers++;
        }

        // 判断第十八题的答案是否正确
        let answer18 = "";
        for (let i = 0; i < answerOptions18.length; i++) {
            if (answerOptions18[i].checked) {
                answer18 = answerOptions18[i].value;
                break;
            }
        }
        if (answer18 === "bo") {
            correctAnswers++;
        }

        // 判断第十九题的答案是否正确
        let answer19 = "";
        for (let i = 0; i < answerOptions19.length; i++) {
            if (answerOptions19[i].checked) {
                answer19 = answerOptions19[i].value;
                break;
            }
        }
        if (answer19 === "bu") {
            correctAnswers++;
        }

        // 判断第二十题的答案是否正确
        let answer20 = "";
        for (let i = 0; i < answerOptions20.length; i++) {
            if (answerOptions20[i].checked) {
                answer20 = answerOptions20[i].value;
                break;
            }
        }
        if (answer20 === "bw") {
            correctAnswers++;
        }

// 在结果框中显示做对的题数
        result.textContent = correctAnswers;

        // 重置正确答案数量
        correctAnswers = 0;

        // 重置表单
        document.querySelector("form").reset();
    });

</script>
</body>
</html>

